<template>
  <div>
    <!--
      @drop="处于盒子内部且松开鼠标"
      @dragover="处于盒子内部"
      @dragenter="刚进入盒子"

       -->
    <!-- 浏览器对拖入文件有默认处理方式 -->
    <div class="box" @drop.stop.prevent="drop" @dragenter.stop.prevent="dragEvent" @dragover.stop.prevent="dragEvent" />
  </div>
</template>
<script>
export default {
  methods: {
    dragEvent(e) {
      // e.stopPropagation()
      // e.preventDefault()
      e.dataTransfer.dropEffect = 'copy'
    },
    drop(e) {
      console.log(e)
    }
  }
}
</script>
<style lang="scss" scoped>
.box{
  width: 300px;
  height: 300px;
  border:5px dashed black;
}
</style>
